<template>
  <div class="login">
    <div class="box">
      <div class="login_form">
        <div class="form">
          <div class="tit">推荐表</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
              <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="ruleForm.companyName" placeholder="请输入公司名称"></el-input>
              </el-form-item>
              <el-form-item label="公司规模" prop="companySize">
                <el-select v-model="ruleForm.companySize" placeholder="请选择公司规模">
                  <el-option label="20人以下" value="20人以下"></el-option>
                  <el-option label="20-50人" value="20-50人"></el-option>
                  <el-option label="50-100人" value="50-100人"></el-option>
                  <el-option label="100人以上" value="100人以上 "></el-option>
                </el-select> 
              </el-form-item>
              <el-form-item label="产品类型" prop="product">
                <el-select v-model="ruleForm.product" placeholder="请选择产品类型">
                  <el-option label="短信" value="短信"></el-option>
                  <el-option label="电销" value="电销"></el-option>
                </el-select>              
              </el-form-item>
               <el-form-item label="个人姓名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入个人姓名"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="email地址" prop="email">
                <el-input v-model="ruleForm.email" placeholder="请输入邮箱地址"></el-input>
              </el-form-item>
              
            </el-form>
            <div class="foot">
                <span style="font-size:12px">邀请人手机号:<em>{{jumpphone}}</em></span>
                <el-button type="primary" @click="submit(ruleForm)">提交</el-button>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
    name:'Recommendation',
    components: {
  },
    data (){
        return{
          ruleForm: {
          name: '',
          companyName: '',
          product: '',
          phone: '',
          email: '',
          companySize: '',
          },
          rules:{
            name: [
               { required: true, message: '请输入个人姓名', trigger: 'blur' },
            ],
            companyName: [
               { required: true, message: '请输入公司名称', trigger: 'blur' },
            ],
            product: [
               { required: true, message: '请选择产品', trigger: 'blur' },
            ],
            phone: [
               { required: true, message: '请输入手机号', trigger: 'blur' },
            ],
            companySize: [
               { required: true, message: '请输入公司规模', trigger: 'blur' },
            ],
          },
          jumpphone:'',
        }
  },
  created(){
    this.jumpphone = this.$route.query.phone
  },
  methods:{
    //提交按钮
    submit(){
      let params ={
        companyName:this.ruleForm.companyName,
        product:this.ruleForm.product,
        realname:this.ruleForm.name,
        peopleCount:this.ruleForm.companySize,
        aphone:this.jumpphone,
        bphone:this.ruleForm.phone,
        email:this.ruleForm.email,
      }
      axios
      .post("http://47.108.58.38/tk/recommend/add",params)
      .then(res =>{
        if(res.data.statusCode == "00000"){
          this.$message.success("提交成功，请耐心等待工作人员与您联系")
          this.ruleForm = []
        }else{
          this.$message.error(res.data.message)
        }
      })
      .catch(err =>{
        this.$message.console.error(err.data.message)
      })
    }
  }
}
</script>

<style scoped lang="less">
@media screen and(max-width:1800px){
  .login {
    width: 100%;
    height: 100vh;
    background: url("../../assets/login_bg.png") no-repeat;
    background-size: 100% 100%;
  .box{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    .login_form{
      border-radius: 5px;
      background: rgba(226,242,255,.5);
      width: 400px;
      height: 500px;
      padding: 15px;
      position: absolute;
      top:100px;
      right:200px;
      .form{
        background: #fff;
        border-radius: 5px;
        height:500px;
        .tit{
              display: flex;
              justify-content: center;
              padding: 20px;
        }
        .el-form{
          margin-left: 40px;
          .el-select{
            width: 230px;
          }
        }
        .el-input{
          width: 230px;
        }
      }
       .foot{
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
}


@media screen and(max-width: 800px) and (min-width: 400px){
  .login {
    width: 100%;
    height: 100vh;
    background: url("../../assets/login_bg.png") no-repeat;
  .box{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    .login_form{
      border-radius: 5px;
      background: #fff;
      width: 400px;
      height: 500px;
      padding: 15px;
      position: absolute;
      top:60px;
      right:0;
      .form{
        background: #fff;
        border-radius: 30px;
        height: 490px;
        width: 350px;
        margin-left: 30px;
        .tit{
              display: flex;
              justify-content: center;
              padding: 20px;
              font-size: 16px;
        }
        .el-form{
          margin-left: 60px;
          .el-select{
            width: 180px;
            height: 25px;
          }
        }
        .el-form-item__label{
          font-size: 12px;
        }
        .el-input{
          width: 180px;
        }
        .el-input__inner{
          font-size: 12px;
          height: 25px;
          line-height: 35px;
        }
        .el-form-item__label{
          font-size:12px ;
        }
      }
       .foot{
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
}

@media screen and(max-width:400px) and (min-width: 350px){
  .login {
    width: 100%;
    height: 100vh;
    background: url("../../assets/login_bg.png") no-repeat;
  .box{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    .login_form{
      border-radius: 5px;
      background: #fff;
      width: 400px;
      height: 500px;
      padding: 15px;
      position: absolute;
      top:60px;
      right:0;
      .form{
        background: #fff;
        border-radius: 30px;
        height: 490px;
        width: 350px;
        margin-left: 30px;
        .tit{
              display: flex;
              justify-content: center;
              padding: 20px;
              font-size: 16px;
        }
        .el-form{
          margin-left: 60px;
          .el-select{
            width: 180px;
            height: 25px;
          }
        }
        .el-form-item__label{
          font-size: 12px;
        }
        .el-input{
          width: 180px;
        }
        .el-input__inner{
          font-size: 12px;
          height: 25px;
          line-height: 35px;
        }
        .el-form-item__label{
          font-size:12px ;
        }
      }
       .foot{
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }
}

@media screen and(max-width:350px) {
 .login {
    width: 100%;
    height: 100vh;
    background: url("../../assets/login_bg.png") no-repeat;
  .box{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    .login_form{
          border-radius: 5px;
          background: #fff;
          width: 380px;
          height: 500px;
          padding: 15px;
          position: absolute;
          top: 15px;
          right: 0;
      .form{
        background: #fff;
        border-radius: 30px;
        height: 490px;
        width: 350px;
        margin-left: 30px;
        .tit{
              display: flex;
              justify-content: center;
              padding: 20px;
              font-size: 14px;
              margin-left: 80px;
        }
        .el-form{
          margin-left: 80px;
          .el-select{
            width: 180px;
            height: 25px;
          }
        }
        .el-form-item__label{
          font-size: 12px;
        }
        .el-input{
          width: 180px;
        }
        .el-input__inner{
          font-size: 12px;
          height: 25px;
          line-height: 35px;
        }
        .el-form-item__label{
          font-size:12px ;
        }
      }
       .foot{
          display: flex;
          justify-content: space-around;
          margin-left: 80px;
        }
      }
    }
  }
}
</style>
